{% extends '/layout.html' %}

{% block title %}Classmates-{{ current_user.uclass.name }} | 小白鼠{% endblock %}

{% block body %}
	<h2>{{ current_user.uclass.name }}({{ nums }})</h2>
	<div>
		{% for user in users %}
		<div style="float: left;width: 60px;height: 30px;text-align: center;background: {{ user.get_color() }};margin: 5px;border-radius: 5px">
			{{ user.fullname }}
		</div>
		{% endfor %}
		<img id="change_listen_status" style="width: 45px" src="
		/static/images/{{ current_user.current_listen_status }}.png">
		<span id="current_status" style="display: none;">{{ current_user.get_color() }}</span>
	</div>
	<script>
		$(function() {
			// $('#current_status').attr('src', '/static/images/'+flag+'.png');
			$('#change_listen_status').click(() => {
				var status = $('#current_status').text();
				var flag = 'go';
				if (status == 'go') {
					flag = 'stop';
				} else {
					flag = 'go';
				};

				var json_data = { 'listen_status': flag };
				$.post('{{ url_for('users.change_listen_status') }}', 
					JSON.stringify(json_data), (data) => {
						console.log(data);
					});

				$('#change_listen_status').attr('src', '/static/images/'+flag+'.png');
				$('#current_status').text(flag);
			});
		});
	</script>
{% endblock %}